let colors = ["green", "red", "pink", "purple", "orange", "#0495fd"];
let strs = "1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
createValidCode(document.getElementById("phone-number-graphy-code").children);
createValidCode(document.getElementById("password-graphy-code").children);
function createValidCode(obj) {
	let letterCode = obj;
	let textColor = 0;
	let skewAngle = 0;
	let fontSize1 = 0;
	try {
		if(obj && obj.length) {
			let fontSize2 = parseFloat(getComputedStyle(letterCode[0], null).getPropertyValue("height"));
			for(let i = 0; i < letterCode.length; i++) {
				textColor = colors[Math.ceil(Math.random() * 5)];
				skewAngle = ` skewX(${Math.random() * 30}deg) skewY(${Math.random() * 30}deg)
						 rotate(${(Math.random() * -30) + (Math.random() * 30)}deg)
						`;
				fontSize1 = fontSize2 / 2;
				letterCode[i].style.color = textColor;
				letterCode[i].style.fontSize = fontSize1 + "px";
				letterCode[i].style.transform = skewAngle;
				letterCode[i].innerHTML = strs[Math.ceil(Math.random() * (strs.length - 1))];

			}
			letterCode[0].parentElement.addEventListener("click", function() {
				createValidCode(obj);
			});
		}
	} catch(err) {
		alert(err.message);
	}

}